<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/statics/plugins/bootstrap/css/bootstrap.min.css"/>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="/statics/plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/statics/dist/css/style.css"/>

<style>
.search-input {
    height: 45px;
    width: 600px;
    margin: 0 auto;
    margin-top: 10px;
    position: relative;
}

.search-input input {
    border: 1px solid #e4e4e4;
    box-sizing: border-box;
    width: 500px;
    height: 45px;
    font-size: 18px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
}

.search-btn {
    height: 45px;
    width: 100px;
    border: 1px solid mediumseagreen;
    background-color: mediumseagreen;
    color: white;
    font-size: 16px;
    font-weight: bold;
    float: left;
}

.search-btn {
    cursor: pointer
}

.search-select {
    position: absolute;
    top: 45px;
    width: 500px;
    box-sizing: border-box;
    z-index: 999;
}

.search-select li {
    border: 1px solid #d4d4d4;
    ;
    border-top: none;
    border-bottom: none;
    background-color: #fff;
    width: 100%
}

.search-select-option {
    box-sizing: border-box;
    padding: 7px 10px;
}

.selectback {
    background-color: #eee !important;
    cursor: pointer
}

input::-ms-clear {
    display: none
}

.search-reset {
    width: 21px;
    height: 21px;
    position: absolute;
    display: block;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    font-size: 20px;
    right: 110px;
    top: 12px
}

.search-select-list {
    transition: all 0.5s
}

.itemfade-enter,
.itemfade-leave-active {
    opacity: 0;
}

.itemfade-leave-active {
    position: absolute;
}

.selectback {
    background-color: #eee !important;
    cursor: pointer
}
.search-select ul{margin:0;text-align: left; }

</style>
</head>
<body>
<div id="app_content">
    <div class="col-xs-8 col-xs-offset-2">
        <!-- 组件不能写到template的根节点上，即每个组件只有一个根节点，这里的div就是这个template的根节点 -->
       <!--  getindex是自定义事件 -->
        <logo-select ></logo-select>
        <div class="search-input col-xs-12">
            <!-- $event是实参，表示event对象 -->
            <!--
                输入搜索内容即时搜索，所以有一个keyup事件。
                按回车键有一个进入搜索内容页面，所以有一个keydown.enter事件
                按上下键可以选择列表条目
            -->
            <div class="form-inline" style="width:824px;">
                <div class="form-group">
                    <input type="text" id="keyword" >
                    <!-- 这是一个小叉叉，点击它可清除输入框内容 -->
                  <!--  <div id="search_remove_id"  class="search-reset fa fa-remove" > <i  ></i></div> -->

                    <button class="search-btn btn" id="search_button">搜一下</button>
                </div>
            </div>
            <div class="search-select col-md-8">
            <!-- transition-group也是vue2.0中的新特性,tag='ul'表示用ul包裹v-for出来的li -->

            </div>
        </div>
    </div>
    <div class="col-xs-8 col-xs-offset-2" id="show_context_id">
        <div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="tab-content">
                     <div role="tabpanel" class="tab-pane active" id="tab1">
                        <div class="list_d" >
                            <div class="row" id="main_context">
                                <div id="ss" >
                                    <div class="item" style="display:none;">
                                        <div class="item_a row_a">
    <!-- 		                            	<strong class="item_a"  id="no"> 1. </strong> -->
                                            <div class="item_a_a col_1" style= "color:#3861a4">title </div>
                                            <div class="item_a_b" style="display:none;">
                                                <a class="btn-xs btn_c mr5"><i class="fa fa-heart-o"> 关注 </i> </a>
                                            </div>
                                        </div>
                                        <div class="item_b row_a" style="display:none;">
                                            <div class="item_b_d"><span class="label label-primary"> 中标  </span> </div>
                                        </div>
                                        <div class="item_c">summary
                                        </div>
                                        <div class="item_d">
                                            <span  style= "color:#3861a4">公告日期：2018-04-25</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- jQuery 2.2.3 -->
    <script type="text/javascript" src="/statics/plugins/jQuery/jquery.min.js"></script>
	<!-- Bootstrap 3.3.6 -->
    <script type="text/javascript" src="/statics/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- bootbox  -->
    <script type="text/javascript" src="/statics/plugins/jQuery/bootbox.min.js"></script>
    <!-- 自定义组建  -->
    <script type="text/javascript" src="/statics/plugins/jQuery/ajax.js"></script>
	<script type="text/javascript" src="/statics/plugins/jQuery/alert.js"></script>
    <!-- 自定义脚本 -->
    <script type="text/javascript" src="/statics/pages/index.js"></script>
</body>
</html>